<template>
	<view class="display: flex; flex-direction: column; align-items: center;width: 750rpx;">
		<u-sticky bgColor="#fff" style="width: 750rpx;">
			<view class="tabContainer">
				<u-tabs :list="navbarLists" @change="onNavChange"></u-tabs>
			</view>
		</u-sticky>
		<template v-if="current == 0">
			<select-page :top="navHeight"></select-page>
		</template>
		<template v-if="current == 1">
			<search-page :top="navHeight" :topTwo="carPaddingTop"></search-page>
		</template>
		<template v-if="current == 2">
			<record-page :top="navHeight"></record-page>
		</template>
	</view>
</template>

<script>
	import navbar from '@/components/navbar/index.vue';
	import selectPage from './select.vue';
	import searchPage from './search.vue';
	import recordPage from './record.vue'
	export default {
		components: {
			navbar,
			selectPage,
			searchPage,
			recordPage
		},
		data() {
			return {
				navHeight: '',
				carPaddingTop: '',
				current: 0,
				navbarLists: [{
						name: '车辆选择'
					},
					{
						name: '车辆搜索'
					},
					{
						name: '历史记录'
					}
				],
			}
		},
		methods: {
			onNavChange(item) {
				console.log(item)
				this.current = item.index
			}
		}
	}
</script>

<style scoped>
	.tabContainer {
		width: 750rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120rpx;
		border-bottom: 1px #f3f3f3 solid;
	}

	.bike-page {
		min-height: 100vh;
		background: #F9F9FA;
		/* box-sizing: border-box; */
	}

	.bike-content {
		padding: 0 24rpx;
	}
</style>